<html>
<head>
	<title>VocaDB Event calendar demo</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.css" rel="stylesheet" type="text/css" />
	<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
	<style>
		body {
			margin: 40px 10px;
			padding: 0;
			font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
			font-size: 14px;
		}

		#calendar-container {
			max-width: 1000px;
			margin: 0 auto;
		}
	</style>
</head>

<body>
	
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span12">
	
				<div id="calendar-container">
					<h1>VocaDB Event calendar demo</h1>
		
					<div id='calendar'></div>
				</div>

			</div>
		</div>
	</div>

	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.js"></script>
	<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/gcal.js'></script>
	<script type='text/javascript' src='url.min.js'></script>
	<script type="text/javascript">

		$(function () {

			var calendarApiKey = $.url('?calendarApiKey');
			var showVocalendar = $.url('?showVocalendar');
			
			function loadEvents() {
				$('#calendar').fullCalendar({
					customButtons: {
						swapVocalendar: {
							text: 'Toggle Vocalendar events',
							click: function() {
								showVocalendar = !showVocalendar;
								$('#calendar').fullCalendar( 'destroy' );
								loadEvents();
							}
						}
					},
					header: {
						left: 'prev,next today',
						center: 'title',
						right: 'swapVocalendar month,basicWeek,basicDay'
					},			
					googleCalendarApiKey: calendarApiKey,
					defaultView: 'month',
					events: {
						color: 'darkgreen',
						textColor: 'white',
						googleCalendarId: showVocalendar && calendarApiKey ? '0mprpb041vjq02lk80vtu6ajgo@group.calendar.google.com' : null
					},
					eventSources: [
						{
							color: 'teal',
							textColor: 'white',
							events: function (start, end, timezone, callback) {
								$.getJSON("https://vocadb.net/api/releaseEvents", { afterDate: start.toJSON(), beforeDate: end.toJSON(), maxResults: 50 }, function (result) {
									var events = [];
									$(result.items).each(function () {
										events.push({
											title: this.name,
											start: this.date,
											url: 'https://vocadb.net/E/' + this.id,
											allDay: true
										});
									});
									callback(events);
								});
							}
						},
						{
							color: 'darkblue',
							textColor: 'white',
							events: function (start, end, timezone, callback) {
								$.getJSON("https://vocadb.net/api/albums", { releaseDateAfter: start.toJSON(), releaseDateBefore: end.toJSON() }, function (result) {
									var events = [];
									$(result.items).each(function () {
										events.push({
											title: this.name,
											start: moment({ year: this.releaseDate.year, month: this.releaseDate.month - 1, day: this.releaseDate.day }),
											url: 'https://vocadb.net/Al/' + this.id,
											allDay: true
										});
									});
									callback(events);
								});
							}
						}								
					]
				});
			}
			
			loadEvents();

		});

	</script>	
</body>
</html>